<template>
  <div class="tree">
    <el-tree
      :data="data"
      show-checkbox
      node-key="编码"
      :check-strictly="false"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="defaultChecked"
      :props="defaultProps"
      :check-on-click-node="false"
      @check="check"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-if="data['构件Id']"
            type="text"
            size="mini"
            @click="() => focus(data)"
          >
            定位
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import treeData from "./index.json";
import { arrayToTree, convertToTree } from "./tree";
export default {
  data() {
    return {
      data: null,
      defaultProps: {
        children: "children",
        label: "编码名称",
      },
      defaultChecked: null,
      AllIds: null,
      AllObjectId: null, //构建id映射表
      tileLayerId: "4CC2E0AC4B60DD1182B70C8E0AFC887E",
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 点击节点进行定位
    focus(data) {
      console.log(data);
      __g.tileLayer.focusActor(
        this.tileLayerId,
        data["构件Id"],
        10,
        1,
        [-45, 45, 0]
      );
      __g.tileLayer.highlightActor(this.tileLayerId, data["构件Id"]);
      setTimeout(() => {
        //停止所有Actor高亮
        __g.tileLayer.stopHighlightAllActors();
      }, 3000);
    },
    check(node, checkedNodes) {
      console.log("[ node ] >", node);
      console.log("[ checkedNodes ] >", checkedNodes);
      // console.log("[ this.ALLIds ] >", this.AllIds);
      let allcheckedKeys = [
        ...checkedNodes.checkedKeys,
        ...checkedNodes.halfCheckedKeys,
      ];
      // 并集 数组去重
      const RemoveSame = [...new Set([...allcheckedKeys, ...this.AllIds])];
      //数组交集，或得两个数组重复的元素
      let SamePart = allcheckedKeys.filter((item) =>
        this.AllIds.includes(item)
      );
      //差集=并集-交集  去除两个数组相同的元素
      let Difference = RemoveSame.filter((item) => !SamePart.includes(item));
      // console.log(Difference);

      if (this.AllIds.length > allcheckedKeys.length) {
        //
        console.log(this.AllObjectId, "AllObjectId");
        console.log("[ 需要隐藏 ] >", Difference);

        __g.tileLayer.hideActors([
          {
            id: this.tileLayerId,
            objectIds: Difference.map(
              (item) =>
                this.AllObjectId[item] && this.AllObjectId[item]["构件Id"]
            ).filter((i) => i),
          },
        ]);
      } else {
        console.log("[ 需要显示 ] >", Difference);
        __g.tileLayer.showActors([
          {
            id: this.tileLayerId,
            objectIds: Difference.map(
              (item) =>
                this.AllObjectId[item] && this.AllObjectId[item]["构件Id"]
            ).filter((i) => i),
          },
        ]);
      }
      this.AllIds = allcheckedKeys;
    },
  },
  created() {},
  mounted() {
    // let resulttreedata = arrayToTree(treeData);
    let resulttreedata = convertToTree(treeData); //扁平化数组转tree结构

    this.data = resulttreedata;
    this.defaultChecked = resulttreedata.map((i) => i["编码"]);

    const AllIds = [];
    const AllObjectId = {};
    treeData.forEach((item) => {
      AllIds.push(item["编码"]);
      if (item["构件Id"]) {
        AllObjectId[item["编码"]] = item;
      }
    });
    this.AllIds = AllIds;
    this.AllObjectId = AllObjectId;
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss" scoped>
.tree {
  position: absolute;
  left: 0;
  top: 100px;
  width: 500px;
  height: 500px;
  background: #000;
  overflow: scroll;
}
</style>
